<!--
 * @Author: 朱铭
 * @Date: 2022-04-21 22:08:51
-->
<template>
  <div class="line">
    <a-tree-select
      v-model="treeValue"
      style="width: 100%;max-height:200px"
      :tree-data="area2"
      tree-checkable
      :show-checked-strategy="SHOW_PARENT"
      search-placeholder="请选择地区"
      :dropdownStyle="treeStyle"
      :maxTagCount="2"
    />
    
    <a-checkbox 
      :checked="checkedAll" 
      @change="onAll"
      v-show="allSelected"
      style="width:140px;margin-right:-20px"
      >
      全选
    </a-checkbox>

    <a-popover title="已选择的省市" trigger="click">
      <template slot="content">
        <div class="popupBox">
          <a-tag 
            color="#108ee9"
            v-for="item in treeValue"
            :key="item.key"
            class="myTag"
            @click="closeArea(item)"
          >
            {{areaObj[item]}}
            <a-icon type="close-circle" />
          </a-tag>
        </div>
      </template>
      <a-button type="primary" style="margin-left:10px;">
        已选择
      </a-button>
    </a-popover>


  </div>
</template>

<script>
//导入数据
import area from './area'
//导入组件回显
import { TreeSelect } from 'ant-design-vue';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

export default {
  data() {
    return {
      //树组件数据
      treeValue:[],
      
      //自定义省市数据
      area2:[],
      areaObj:null,
      //回显合并
      SHOW_PARENT,
      //树选择下拉框样式
      treeStyle:{
        "max-height":"200px"
      },
      //是否选中全部
      checkedAll:false,
      //全部的省份数量
      allProvince:0,
    };
  },
  props:{
    //显示等级，1表示传省  2表示省市  3表示省市区
    AreaLevel:{
      type:Number,
      default:2
    },
    //回传数据
    //1 表示[ {level:'0-0',name:'北京'},{level:'0-1',name:’天津‘} ]
    //2 表示[ {province:'省',city:'市',area:'区',level:'0-0'} ]
    receiveData:{
      type:Number,
      default:1
    },
    //是否增加全选
    allSelected:{
      type:Boolean,
      default:false
    }
  },
  watch: {
    /*
    * 监听tree中的事件并返回数据
    */
    treeValue(newData){
      var returnData = []
      var count = 0
      if(newData.length){
        newData.forEach(item => {
          if(item.split('-').length == 2){
            count++
          }
          if(this.receiveData == 1){
            returnData.push({
              level:item,
              name:this.areaObj[item]
            })
          }else if(this.receiveData == 2){
            var add = {}
            var arr = item.split('-')
            add.province = this.areaObj[arr[0] + '-' + arr[1]]
            add.city = arr[2] ? this.areaObj[arr[0] + '-' + arr[1] + '-' + arr[2]].split('-')[1] : ''
            add.area = arr[3] ? this.areaObj[arr[0] + '-' + arr[1] + '-' + arr[2] + '-' + arr[3]].split('-')[2] : ''
            returnData.push(add)
          }
          
        })
      }
      
      //判断是否已经选择全部
      if(count == this.allProvince){
        this.checkedAll = true
      }

      this.$emit('getArea',returnData)
    }
  },
  mounted() {
    this.loopArea()
  },
  methods: {
    /**
     * 遍历地区数据，使其成为符合条件的数据
     */
    loopArea(){
      var area2 = area
      var areaObj = {}
      var count = 0
      //循环遍历数据，使其成为符合条件的数据格式
      for(var a = 0 ; a < area2.length ; a++){
        var province = area2[a]
        //将原始数据中的key value 写入
        province.key = '0-' + a
        province.value = '0-' + a
        province.title = province.name
        //将省一级的对应关系写入对象中
        areaObj['0-' + a] = province.name
        //console.log("province",JSON.stringify(province.key))
        // console.log("province",province)
        if(this.AreaLevel > 1){
          for(var b = 0 ; b < province.children.length ; b++){
            var city = province.children[b]
            //将原始数据中的key value 写入
            city.key = '0-' + a + '-' + b
            city.value = '0-' + a + '-' + b
            city.title = province.children[b].name
            //将市一级的对应关系写入对象中
            areaObj['0-' + a + '-' + b] = province.name + '-' + city.name

            if(this.AreaLevel > 2){
              for(var c = 0 ; c < city.children.length ; c++){
                var address = city.children[c]
                //将原始数据中的key value 写入
                address.key = '0-' + a + '-' + b + '-' + c
                address.value = '0-' + a + '-' + b + '-' + c
                address.title = province.name
                //将区一级的对应关系写入对象中
                areaObj['0-' + a + '-' + b + '-' + c] = province.name + '-' + city.name + '-' + address.name
        
              }
            }else{
              delete city.children
            }
    
          }
        }else{
          delete province.children
        }
        count ++
      }

      this.area2 = area2
      this.areaObj = areaObj
      this.allProvince = count
    },

    /**
     * 在全部已选择中移除省市
     */
    closeArea(e){
      var newTree = this.treeValue.filter(item => item !== e);
      this.treeValue = newTree
    },

    /*
    * 全选或者全不选
    */
    onAll(){
      if(!this.treeValue.length){
        this.treeValue = []
        for(var key in this.areaObj){
          this.treeValue.push(key)
        }
      }else{
        this.treeValue = []
        this.checkedAll = false
      }
    }
  },
}
</script>

<style scoped>
  .line{
    display: flex;
  }
  .popupBox{
    max-height: 100px;
    overflow: auto;
    display: flex;
    flex-direction: column;
  }
  .myTag{
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>